<template>
    <el-container>
        <el-header class="sa-header">
            <div class="sa-title sa-flex sa-row-between">
                <div class="label sa-flex">
                    <div class="sa-flex">
                       <!-- <span class="left"> 价格模板</span>  -->
                        <el-button type="primary" @click="edit('add')">添加模板</el-button>

                    </div>
                    

                    <search-condition :conditionLabel="filterParams.conditionLabel"
                        @deleteFilter="deleteFilter"></search-condition>
                </div>
                <div>
                    <!-- <el-button class="sa-button-add" @click="bathAssagn">批量指派</el-button>
            <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button> -->
                    <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="sa-p-0" v-loading="table.loading">
            <el-table ref="multipleTableRef" class="sa-table" height="100%" :data="table.data" stripe row-key="id">
                <template #empty>
                    <sa-empty />
                </template>
                <el-table-column prop="id" label="序号" min-width="80" align="center" />
                <el-table-column prop="title" label="模板名称" min-width="180" align="center" show-overflow-tooltip />

                <el-table-column prop="title" label="应用范围" min-width="180" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.id === 1 ? '全局' : '指定' }}
                    </template>
                </el-table-column>
                <el-table-column prop="sale_price_float" label="模板规则" min-width="700" align="center">
                    <template #default="scope">
                        【售价自动{{ floatlist[scope.row.sale_price_float] }}{{ scope.row.sale_price_float === 2 ? scope.row.sale_price_type === 2 ? scope.row.sale_price_num + '%' : scope.row.sale_price_num + '元' : '' }}】 / 
                        【市场价自动{{ floatlist[scope.row.market_price_float] }}{{ scope.row.sale_price_float === 2 ?  scope.row.market_price_type === 2 ? scope.row.market_price_num + '%' : scope.row.market_price_num + '元' : '' }}】 / 
                        【商家采购价自动{{ floatlist[scope.row.buy_price_float] }}{{ scope.row.sale_price_float === 2 ?  scope.row.sale_price_type === 2 ? scope.row.buy_price_num + '%' : scope.row.buy_price_num + '元' : '' }}】
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="num" label="已应用商品数" min-width="180" align="center" show-overflow-tooltip /> -->
                <el-table-column prop="mobile" label="创建人" min-width="180" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.create_by ? scope.row.create_by : '--' }}
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" min-width="180" align="center" show-overflow-tooltip />
                <el-table-column label="状态" min-width="160" align="center">
                    <template #default="scope">
                        {{ scope.row.status === 1 ? '启用' : '禁用' }}
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作" min-width="240">
                    <template #default="scope">
                        <el-button type="primary" class="is-link"
                            @click="edit('edit',scope.row)">编辑
                        </el-button>
                        <el-popconfirm
                        width="fit-content"
                        confirm-button-text="确认"
                        cancel-button-text="取消"
                        title="确认删除这条数据?"
                        @confirm="deleteRow(scope.row.id)"
                        >
                            <template #reference>
                                <el-button
                                class="is-link"
                                type="danger"
                                v-if="scope.row.id !== 1"
                                >
                                删除
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <sa-view-bar>
            <template #right>
                <sa-pagination :pageData="pageData" @updateFn="getData" />
            </template>
        </sa-view-bar>
    </el-container>
    <el-dialog v-model="dialogVisible" title="价格模板" width="600" :before-close="handleClose">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" @submit.native.prevent="submitForm">
            <el-form-item label="模板名称" prop="title">
                <el-input placeholder="输入" v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="应用范围" prop="id">
                <el-tag size="large" v-if="form.id === 1">全局</el-tag>
                <el-tag size="large" v-else>指定</el-tag>
            </el-form-item>
            <el-form-item label="商品售价" inline>
                <el-form-item><el-tag type="info" size="large">按供货价</el-tag></el-form-item>
                <el-form-item prop="sale_price_float" label=" " label-width="1px">
                    <el-select v-model="form.sale_price_float" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in floatselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="sale_price_type" label=" " label-width="1px" v-if="form.sale_price_float !== 2">
                    <el-select v-model="form.sale_price_type" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in typeselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="sale_price_num" label=" " label-width="1px" v-if="form.sale_price_float !== 2">
                    <el-input placeholder="输入" v-model="form.sale_price_num" style="width: 100px;">
                        <template #append>{{ form.sale_price_type === 2 ? '%' : '元' }}</template>
                    </el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item label="商品市场价" inline>
                <el-form-item><el-tag type="info" size="large">按供货价</el-tag></el-form-item>
                <el-form-item prop="market_price_float" label=" " label-width="1px">
                    <el-select v-model="form.market_price_float" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in floatselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="market_price_type" label=" " label-width="1px" v-if="form.market_price_float !== 2">
                    <el-select v-model="form.market_price_type" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in typeselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="market_price_num" label=" " label-width="1px" v-if="form.market_price_float !== 2">
                    <el-input placeholder="输入" v-model="form.market_price_num" style="width: 100px;">
                        <template #append>{{ form.market_price_type === 2 ? '%' : '元' }}</template>
                    </el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item label="商家采购价" inline>
                <el-form-item><el-tag type="info" size="large">按供货价</el-tag></el-form-item>
                <el-form-item prop="buy_price_float" label=" " label-width="1px">
                    <el-select v-model="form.buy_price_float" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in floatselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="buy_price_type" label=" " label-width="1px" v-if="form.buy_price_float !== 2">
                    <el-select v-model="form.buy_price_type" placeholder="选择" style="width: 80px;">
                        <el-option v-for="item in typeselect" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item prop="buy_price_num" label=" " label-width="1px" v-if="form.buy_price_float !== 2">
                    <el-input placeholder="输入" v-model="form.buy_price_num" style="width: 100px;">
                        <template #append>{{ form.buy_price_type === 2 ? '%' : '元' }}</template>
                    </el-input>
                </el-form-item>
            </el-form-item>
            <el-form-item label="模板状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="resetForm">取消</el-button>
                <el-button type="primary" @click="submitForm"> 确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
export default {
    name: 'supplychian.admin.supply.index',
};
</script>

<script setup>
import { onMounted, reactive, ref, computed, unref } from 'vue';
import { usePagination, useModal } from '@/sheep/hooks';
import { api } from '../settings.service';
import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
import { cloneDeep } from 'lodash';
import { ElMessage, ElForm } from 'element-plus';
import $storage from '@/sheep/utils/storage';
import { composeFilter } from '@/sheep/utils';


const show = computed(() => {
    return !$storage.get('lastLogin').info.merchant_id;
});

const value = ref('');
const options = ref([]);
const loading = ref(false);
const dialogVisible = ref(false);
const table = reactive({
    loading: false,
    data: [],
});
const floatlist = reactive([0,'上浮','原价','下浮'])
const floatselect = reactive([
    {
        label:'上浮',
        value:1
    },
    {
        label:'原价',
        value:2
    },
    {
        label:'下浮',
        value:3
    },
])
const typeselect = reactive([
    {
        label:'固值',
        value:1
    },
    {
        label:'比例',
        value:2
    },
])
const filterParams = reactive({
    tools: {

        title: {
            type: 'tinput',
            label: '模板名称',
            field: 'title',
            value: '',
        },

    },
    data: {
        title: '',
        status: [],
    },
    conditionLabel: {},
});
const form = ref({})
const rules = reactive({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    status: [{ required: true, message: '请选择模板状态', trigger: 'blur' }],
    market_price_float: [{ required: true, message: '请选择', trigger: 'blur' }],
    market_price_type: [{ required: true, message: '请选择', trigger: 'blur' }],
    market_price_num: [{ required: true, message: '请输入', trigger: 'blur' }],
    sale_price_float: [{ required: true, message: '请选择', trigger: 'blur' }],
    sale_price_type: [{ required: true, message: '请选择', trigger: 'blur' }],
    sale_price_num: [{ required: true, message: '请输入', trigger: 'blur' }],
    buy_price_float: [{ required: true, message: '请选择', trigger: 'blur' }],
    buy_price_type: [{ required: true, message: '请选择', trigger: 'blur' }],
    buy_price_num: [{ required: true, message: '请输入', trigger: 'blur' }],
})
const { openFilter, deleteFilter } = useSearch({ filterParams, getData });

const { pageData } = usePagination();

const handleClose = () => {
    dialogVisible.value = false;

};
async function deleteRow(id){
    const {error, data} = await api.shop_delPriceTemp(id)
      if(error === 0){
        ElMessage.success('操作成功')
        getData()
      }
}
function edit(type,row){
    if(type === 'add'){
        resetForm()
    }else{
        form.value = row
    }
    dialogVisible.value = true
}
const formRef = ref(null);
const submitForm = async() => {
  unref(formRef).validate(async(valid) => {
    if (valid) {
      const {error, data} = await api.shop_editPriceTemp(form.value)
      if(error === 0){
        ElMessage.success('操作成功')
        getData()
      }
      console.log('表单提交成功', form);
      resetForm()
    } else {
      console.log('表单校验失败');
      return false;
    }
  });
};
const resetForm = () => {
  form.value = {}
  formRef.value?.resetFields();
  dialogVisible.value = false
};
async function getData(page) {
    table.loading = true;
    if (page) pageData.page = page;
    let tempSearch = cloneDeep(filterParams.data);
    let search = composeFilter(tempSearch);
    const { error, data } = await api.shop_priceTemp({
        page: pageData.page,
        list_rows: pageData.list_rows,
        search: tempSearch.title,
        // ...search
    });
    table.loading = false;
    if (error === 0) {
        table.data = data.data;
        pageData.page = data.current_page;
        pageData.list_rows = data.per_page;
        pageData.total = data.total;
    }
}

onMounted(() => {
    getData();
});
</script>
<style></style>